<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数
      function Product(name, price) {
        this.name = name
        this.price = price
      }
      function Food(name, price) {
        Product.call(this, name, price)
        this.category = 'food'
      }
      console.log(new Food('cheese', 5).name)

      function Toy(name, price) {
        Product.call(this, name, price)
        this.category = 'toy'
      }

      let cheese = new Food('feta', 5)
      let fun = new Toy('robot', 40)

      console.log(cheese)
      console.log(fun)

      // let animals = [
      //   { species: 'Lion', name: 'King' },
      //   { species: 'Whale', name: 'Fail' },
      // ]

      // for (let i = 0; o <= animals.length; i++) {
      //   ;(function (i) {
      //     this.print = function () {
      //       console.log('#' + i + '' + this.species + ':' + this.name)
      //     }
      //   }.call(animals[i], i))
      // }

      //console.log(animals())

      //使用call方法调用函数并且指定上下文的this
      //下列例子中，当调用greet方法的时候，该方法的this值会绑定到obj对象
      function greet() {
        let reply = [
          this.animal,
          'typically sleep between',
          this.sleepDuration,
        ].join('')
        console.log(reply)
      }
      let obj = {
        animal: 'cats',
        sleepDuration: '12 and 16 hours',
      }
      greet.call(obj)

      //使用call方法调用函数并且不指定第一个参数(argument)
      //下列例子，调用display方法，但并没有传递它的第一个参数，如果没有传递第一个参数，this的值将会Benin绑定为全局对象
      // let data = 'Wisen'
      // function display() {
      //   console.log('Data value is %s', this.data)
      // }
      // display.call()
      //严格模式下
      // ;('use strict')
      // let data = 'Wisen'
      // function display() {
      //   console.log('Data value is %s', this.data)
      // }
      // display.call()
    </script>
  </body>
</html>
